// script.js
document.getElementById('mobile-menu').addEventListener('click', function() {
    const navLinks = document.querySelector('.nav-links');
    navLinks.classList.toggle('active');
});

// 家谱数据（JSON格式）
const familyTreeData = {
    name: "祖先",
    children: [
        {
            name: "第一代长子",
            children: [
                { name: "第二代长子" },
                { name: "第二代次子" }
            ]
        },
        {
            name: "第一代次子",
            children: [
                { name: "第二代三子" },
                { name: "第二代四子", children: [{ name: "第三代长子" }] }
            ]
        }
    ]
};

// 树状图绘制
const width = 1200;
const height = 600;

const svg = d3.select("#tree-container")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(50, 50)");

// 调整树状图布局为从上到下
const treeLayout = d3.tree().size([width - 200, height - 100]); // 交换宽高

const root = d3.hierarchy(familyTreeData);
treeLayout(root);

// 绘制连线
const links = svg.selectAll(".link")
    .data(root.links())
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", d3.linkVertical() // 使用 linkVertical 代替 linkHorizontal
        .x(d => d.x) // 交换 x 和 y
        .y(d => d.y)
    );

// 绘制节点
const nodes = svg.selectAll(".node")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${d.x},${d.y})`); // 交换 x 和 y

// 添加节点圆圈
nodes.append("circle")
    .attr("r", 5);

// 添加节点文字
nodes.append("text")
    .attr("dy", "0.31em")
    .attr("x", d => d.children ? -10 : 10)
    .style("text-anchor", d => d.children ? "end" : "start")
    .text(d => d.data.name);